<template>
    <div class="login">
        <section class="form_container">
            <div class="manage_tip">
                <span class="title">后台管理系统</span>
                <el-form :model="loginUser" status-icon :rules="loginRules" ref="loginRef" label-width="80px" class="loginForm">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="loginUser.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="loginUser.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="submit_btn" @click="submitForm">登录</el-button>
                    </el-form-item>
                    <div class="tiparea">
                        <p>还没有账号？现在<router-link to='/register'>注册</router-link></p>
                    </div>
                </el-form>
            </div>
        </section>
    </div>
</template>

<script>
    import jwt_decode from 'jwt-decode'
    export default {
        name: 'login',
        data(){
            return{
                loginUser:{
                    username:'',
                    password:''
                },
                loginRules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ]
                }
            }
        },
        methods:{
            submitForm(){
                this.$refs["loginRef"].validate((valid) => {
                    if (valid) {
                        this.$axios.post("/api/users/login",this.loginUser)
                                    .then(res =>{

                                        //token 存储到localstorage中
                                        const { token } = res.data;
                                        localStorage.setItem("eleToken", token);
                                        // 解析token
                                        const decode = jwt_decode(token);
                                        // console.log(decode)
                                        // 存储数据
                                        this.$store.dispatch("setIsAutnenticated", !this.isEmpty(decode));
                                        this.$store.dispatch("setUser", decode);
                                        // 页面跳转
                                        this.$router.push("/index");
                                    });
                    } else {
                        this.$message({
                            message:'请填写登录信息',
                            type:"error"
                        });
                        return false;
                    }
                });
            },
            isEmpty(value) {
                return (
                    value === undefined ||
                    value === null ||
                    (typeof value === "object" && Object.keys(value).length === 0) ||
                    (typeof value === "string" && value.trim().length === 0)
                );
            }
        }
    }
</script>

<style scoped>
    .login {
        position: relative;
        width: 100%;
        height: 100%;
        background: url("../assets/bg.jpg") no-repeat center center;
        background-size: 100% 100%;
    }

    .form_container {
        width: 370px;
        height: 210px;
        position: absolute;
        top: 10%;
        left: 34%;
        padding: 25px;
        border-radius: 5px;
        text-align: center;
    }

    .form_container .manage_tip .title {
        font-family: "Microsoft YaHei";
        font-weight: bold;
        font-size: 26px;
        color: #fff;
    }

    .loginForm {
        margin-top: 20px;
        background-color: #fff;
        padding: 20px 40px 20px 20px;
        border-radius: 5px;
        box-shadow: 0px 5px 10px #cccc;
    }

    .submit_btn {
        width: 100%;
    }

    .el-button{
        margin-left: -45px;
    }

    .tiparea {
        text-align: right;
        font-size: 12px;
        color: #333;
    }
    .tiparea p a {
        color: #409eff;
    }
</style>